<script>
export default {
    props: ['todos', 'filter'],
    data() {
        return {
            states: ['all', 'active', 'completed']
        }
    },
    methods: {
        toggleState(state) {
            // this.$emit('changearray', state)
            this.$emit('toggle', state)
        },
        clearCompleted() {
            this.$emit('clear')
        }
    },
    computed: {
        leftnum() {
            return this.todos.filter((todo) => todo.completed != true).length
        }
    }
}
</script>
<template>
    <div id="tabs">
        <span>剩余未完成的:{{ leftnum }}</span>
        <span id="choice">
            <button v-for="state in states" :class="{ choiced: filter === state }" @click="toggleState(state)">{{
                state }}</button>

        </span>
        <button @click="clearCompleted">Clear Completed</button>
    </div>
</template>
<style scoped>
#tabs {
    display: flex;
    justify-content: space-between;
}

button {
    background: none;
    border: none;
    font-size: 20px;
}

.choiced {
    border: 2px solid red;
    border-radius: 5px;
}
</style>
